<template>
	<!-- 瓷片区 -->
	<view class="tileArea skeleton-rect" :style="[boxStyle]" v-if="picList.length">
		<view class="advert">
			<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
				<view class="empty-box" :style="{
				'border-radius': item.bgStyle.val ? item.bgStyle.val * 2 + 'rpx' : '0',
				background: `linear-gradient( 90deg, ${item.bgColor.color[0].item} 0%, ${item.bgColor.color[1].item} 100%)`,
				margin: `0 ${item.mrConfig.val * 2}rpx 0 ${item.mlConfig.val * 2}rpx`,
				width: item.widthConfig.val ? item.widthConfig.val + '%' : 'auto',
				color: item.fontColor.color.item,
				}">
					<view>{{ item.title || '标题' }}</view>
					<view class="click-in">点击进入></view>
					<view class="tile-icon" v-if="item.image">
						<!-- 图标显示加载状态 -->
						<easy-loadimage mode="widthFix" :radius="15" :image-src="item.image"></easy-loadimage>
					</view>
					<!-- <image class="tile-icon" :src="item.image" v-if="item.image" mode=""></image> -->

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import easyLoadimage from '@/components/easy-loadimage.vue';
	export default {
		name: 'pictureCube',
		components: {
			easyLoadimage
		},
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				picList: this.dataConfig.picStyle.picList,
				style: this.dataConfig.tabConfig.tabVal,
				prConfig: this.dataConfig.lrConfig.val,
				widthC: '',
				imageH: ''
			};
		},
		computed: {
			//最外层盒子的样式
			boxStyle() {
				return {
					borderRadius: this.dataConfig.bgStyle.val * 2 + 'rpx',
					background: `linear-gradient(${this.dataConfig.bgColor.color[0].item}, ${this.dataConfig.bgColor.color[1].item})`,
					margin: this.dataConfig.mbConfig.val * 2 + 'rpx' + ' ' + this.dataConfig.lrConfig.val * 2 + 'rpx' +
						' ' + 0,
					padding: this.dataConfig.upConfig.val * 2 + 'rpx' + ' ' + this.dataConfig.lriConfig.val * 2 + 'rpx' +
						' ' + this.dataConfig.downConfig.val *
						2 + 'rpx'
				}
			},
			// style == 5 height: 188rpx;
			//图片魔方排版
			gridColumns() {
				if ([1, 5].includes(this.dataConfig.tabConfig.tabVal)) {
					return {
						gridTemplateColumns: 'repeat(2, 1fr)'
					}
				} else if (this.dataConfig.tabConfig.tabVal == 0) {
					return {
						gridTemplateColumns: 'repeat(1, 1fr)'
					}
				} else if (this.dataConfig.tabConfig.tabVal == 2) {
					return {
						gridTemplateColumns: 'repeat(3, 1fr)'
					}
				} else if (this.dataConfig.tabConfig.tabVal == 4) {
					return {
						gridTemplateColumns: 'repeat(4, 1fr)'
					}
				}
			},
		},
		mounted() {
			if (this.picList.length) {
				let that = this;
				this.$nextTick((e) => {
					if ([0, 1, 5].includes(this.style)) {
						this.widthC = 375
					} else if (this.style == 2) {
						this.widthC = 250
					} else if (this.style == 4) {
						this.widthC = 188
					}
					uni.getImageInfo({
						src: that.setDomain(that.picList[0].image),
						success: (res) => {
							if (res && res.height > 0) {
								let height = res.height * ((that.widthC - that.prConfig * 2) / res
									.width)
								that.$set(that, 'imageH', height);
							} else {
								that.$set(that, 'imageH', (that.widthC - that.prConfig * 2) * 2);
							}
						},
						fail: function(error) {
							that.$set(that, 'imageH', (that.widthC - that.prConfig * 2) * 2);
						}
					})
				})
			}
		},
		methods: {
			//替换安全域名
			setDomain: function(url) {
				url = url ? url.toString() : '';
				//本地调试打开,生产请注销
				if (url.indexOf("https://") > -1) return url;
				else return url.replace('http://', 'https://');
			},
			goDetail(item) {
				console.log('teststsstt', item);
				this.$util.navigateTo(item.link);
			}
		}
	}
</script>

<style lang="scss">
	.tileArea {}

	.advert {
		display: flex;
		width: 100%;
		box-sizing: inherit;

		.item {
			width: 100%;
		}
	}


	.empty-box {
		height: 120rpx;
		position: relative;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding-left: 12px;
		padding-top: 6px;
		font-size: 14px;
		font-weight: 800;
		background-size: 60px 42px;

		// line-height: 60px;
		.click-in {
			font-size: 9px;
			margin-top: 8px;
		}

		.tile-icon {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 60px;
			height: 42px;
			z-index: 0;
		}

		view {
			z-index: 1;
		}
	}

	.pictureCube {
		.advertItem04 {
			width: 100%;

			.item {
				width: 50%;
				height: 128rpx;

				.pic {
					width: 100%;
					height: 188rpx;
				}

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>